packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx (1)

31-55: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Memoize the context value to avoid needless consumer re-renders.

orgProfileCtxValue (including a brand-new customPages: [] array) is recreated on every render and passed straight into OrganizationProfileContext.Provider. Any consumer relying on referential identity (e.g. a useEffect/useMemo dependency on customPages or the context object itself) will re-run needlessly on every re-render of this provider.

♻️ Suggested fix

-  const orgProfileCtxValue = {
-    componentName: 'OrganizationProfile' as const,
-    mode: 'mounted' as const,
-    routing: 'hash' as const,
-    path: undefined,
-    afterLeaveOrganizationUrl,
-    apiKeysProps,
-    customPages: [],
-  };
+  const orgProfileCtxValue = useMemo(
+    () => ({
+      componentName: 'OrganizationProfile' as const,
+      mode: 'mounted' as const,
+      routing: 'hash' as const,
+      path: undefined,
+      afterLeaveOrganizationUrl,
+      apiKeysProps,
+      customPages: [],
+    }),
+    [afterLeaveOrganizationUrl, apiKeysProps],
+  );

As per coding guidelines, **/*.{tsx,jsx} should "Minimize re-renders in React components" and "Use proper useMemo for expensive computations in React components."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx`
around lines 31 - 55, Memoize orgProfileCtxValue in OrganizationProfileProvider
so its object identity remains stable across renders, including the customPages
array. Use React’s memoization hook with dependencies covering
afterLeaveOrganizationUrl and apiKeysProps, while keeping the existing context
fields and provider behavior unchanged.

Source: Coding guidelines

packages/ui/src/experimental/index.ts (1)

10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace the chained wildcard barrels with deliberate public exports.

The intermediate and published barrels together expose future symbols and collisions through @clerk/ui/experimental.

• packages/ui/src/experimental/index.ts#L10-L10: explicitly export the supported experimental components from their leaf modules.
• packages/ui/src/composed/index.ts#L1-L2: remove the intermediate wildcard aggregation or replace it with an explicit internal export list.

As per coding guidelines, “Avoid barrel files (index.ts re-exports) as they can cause circular dependencies.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/experimental/index.ts` at line 10, Replace the wildcard
export in packages/ui/src/experimental/index.ts at line 10 with explicit exports
of the supported experimental components from their leaf modules. In
packages/ui/src/composed/index.ts at lines 1-2, remove the wildcard aggregation
or replace it with an explicit internal export list so future symbols and
collisions are not exposed.

Source: Coding guidelines

integration/tests/composed-components.test.ts (1)

31-45: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add an integration fixture without a local 'use client' boundary.

This page becomes a Client Component, so it cannot verify the advertised ability to import and render these exports directly from a React Server Component. Add a minimal server page that imports the experimental components and asserts they render.

As per coding guidelines, include tests for all new features.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@integration/tests/composed-components.test.ts` around lines 31 - 45, Update
the composedUserProfilePage fixture to remove the local 'use client' directive
and keep it as a minimal React Server Component that imports and renders the
experimental UserProfile exports. Ensure the integration test asserts successful
rendering from this server page, covering the direct server-component import
path for all newly supported components.

Source: Coding guidelines

packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx (1)

18-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add explicit return types to exported components.

• packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx#L18-L18: annotate the component return type.
• packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx#L46-L46: annotate the newly exported component return type.
• packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx#L26-L26: annotate the exported component return type.

As per coding guidelines, exported TypeScript APIs require explicit return types; based on learnings, this repository enforces that for exported functions.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx` at line 18, Add
explicit return type annotations to the exported components ProfilePagePanel,
ConfigureSSO, and ProfileCardPage. Update each component declaration at
packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx:18-18,
packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx:46-46, and
packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx:26-26, using the
appropriate React component return type while preserving their existing
behavior.

Sources: Coding guidelines, Learnings

packages/ui/src/composed/UserProfile/UserProfileProvider.tsx (1)

29-37: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Memoize the context value to avoid re-rendering the whole composed subtree.

userProfileCtxValue is a new object every render, so all descendants consuming UserProfileContext re-render on every UserProfileProvider render regardless of whether any field changed. ProfileProviderShell already memoizes its comparable derived values (router, options), so this is inconsistent with the pattern elsewhere in the layer.

As per coding guidelines, "**/*.{jsx,tsx}": "Use proper useMemo for expensive computations in React components" and "Minimize re-renders in React components."

♻️ Proposed fix

+import { useMemo } from 'react';
 ...
-  const userProfileCtxValue = {
-    componentName: 'UserProfile' as const,
-    mode: 'mounted' as const,
-    routing: 'hash' as const,
-    path: undefined,
-    additionalOAuthScopes,
-    apiKeysProps,
-    customPages: [],
-  };
+  const userProfileCtxValue = useMemo(
+    () => ({
+      componentName: 'UserProfile' as const,
+      mode: 'mounted' as const,
+      routing: 'hash' as const,
+      path: undefined,
+      additionalOAuthScopes,
+      apiKeysProps,
+      customPages: [],
+    }),
+    [additionalOAuthScopes, apiKeysProps],
+  );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/composed/UserProfile/UserProfileProvider.tsx` around lines 29
- 37, Memoize the userProfileCtxValue object in UserProfileProvider with
React.useMemo, using all values included in the context object—especially
additionalOAuthScopes and apiKeysProps—as dependencies; preserve the existing
constant fields and empty customPages value.

Source: Coding guidelines

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes